<template>
    <el-card class="border-0">
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="24">
                <el-col :span="8" :offset="0">
                    <el-form-item label="大洲">
                        <el-select v-model="searchForm.continent">
                            <el-option v-for="(item, index) in continentList" :label="item.zhName" :value="item.code"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="国家">
                        <div class="flex flex-row">
                            <el-input v-model="searchForm.countryZhName" placeholder="国家中文名称" clearable></el-input>
                        </div>

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData(1)">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                        <el-button type="primary" @click="handleCreate">新增</el-button>
                    </div>
                </el-col>
            </el-row>

        </el-form>

        <div class="table-container">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column label="公司名称" prop="companyName" align="center"></el-table-column>
                <el-table-column label="公司英文名称" prop="companyEnName" align="center"></el-table-column>
                <el-table-column label="大洲编码" prop="continent" align="center"></el-table-column>
                <el-table-column label="大洲中文名称" prop="continentZhName" align="center"></el-table-column>
                <el-table-column label="大洲英文名称" prop="continentEnName" align="center"></el-table-column>
                <!-- <el-table-column label="国家编码" prop="country" align="center"></el-table-column> -->
                <el-table-column label="国家中文名称" prop="countryZhName" align="center"></el-table-column>
                <el-table-column label="国家英文名称" prop="countryEnName" align="center"></el-table-column>
                <el-table-column label="中文详细地址" prop="addressZhName" align="center" width="250"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="英文详细地址" prop="addressEnName" align="center" width="250"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="联系方式" prop="phone" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="邮箱" prop="email" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template #default="scope">
                        <el-button @click="handleEdit(scope.row)" type="primary" size="small" text>编辑</el-button>
                        <!-- <el-button @click="handleDetail(scope.row)" type="primary" size="small" text>详情</el-button> -->
                        <el-popconfirm title="确定删除合作伙伴吗?" @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button type="primary" size="small" text>删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="parseInt(searchForm.total)"
                :current-page="searchForm.pageNo" :page-size="searchForm.pageSize" @current-change="getData" />
        </div>

        <FormDrawer ref="formDrawerRef" :showSubBtn="showSubBtn" :title="drawerTitle" @submit="handleSubmit"
            @isClosed="isClosed">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="120px" :inline="false">
                <el-form-item label="公司名称" prop="companyName">
                    <el-input :disabled="!showSubBtn" v-model="form.companyName" placeholder="公司名称"></el-input>
                </el-form-item>
                <el-form-item label="公司英文名称" prop="companyName">
                    <el-input :disabled="!showSubBtn" v-model="form.companyEnName" placeholder="公司英文名称"></el-input>
                </el-form-item>
                <el-form-item label="大洲" prop="continent">
                    <el-select v-model="form.continent" @change="selectChange_continent">
                        <el-option v-for="(item, index) in continentList" :label="item.zhName" :value="item.code"
                            :key="index"></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="大洲中文名称" prop="continentZhName">
                    <el-input disabled v-model="form.continentZhName" />
                </el-form-item>
                <el-form-item label="大洲英文名称" prop="continentEnName">
                    <el-input disabled v-model="form.continentEnName" />
                </el-form-item>
                <!-- <el-form-item label="国家编码" prop="country">
                    <el-input :disabled="!showSubBtn" v-model="form.country" placeholder="国家编码"></el-input>
                </el-form-item> -->
                <el-form-item label="国家中文名称" prop="countryZhName">
                    <el-input :disabled="!showSubBtn" v-model="form.countryZhName" placeholder="国家中文名称"></el-input>
                </el-form-item>
                <el-form-item label="国家英文名称" prop="countryEnName">
                    <el-input :disabled="!showSubBtn" v-model="form.countryEnName" placeholder="国家英文名称"></el-input>
                </el-form-item>
                <el-form-item label="中文详细地址" prop="addressZhName">
                    <el-input :disabled="!showSubBtn" v-model="form.addressZhName" placeholder="中文详细地址"></el-input>
                </el-form-item>
                <el-form-item label="英文详细地址" prop="addressEnName">
                    <el-input :disabled="!showSubBtn" v-model="form.addressEnName" placeholder="英文详细地址"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input :disabled="!showSubBtn" v-model="form.phone" placeholder="联系方式"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input :disabled="!showSubBtn" v-model="form.email" placeholder="邮箱"></el-input>
                </el-form-item>

            </el-form>
        </FormDrawer>
    </el-card>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { partner_addOrUpdate_api, partner_delete_api, partner_pageQuery_api } from '~/api/official_article_api';
import FormDrawer from "~/components/FormDrawer.vue";
import { toast, toastWarn } from "~/composables/util"

// ------------------ data -----------------------
const searchFormInitObject = {
    continent: '',
    countryZhName: '',
    total: 1,
    pageNo: 1,
    pageSize: 10,
}

const searchForm = reactive(searchFormInitObject)

const form = reactive({
    id: '',
    companyName: '',
    companyEnName: '',
    continent: '',
    continentZhName: '',
    continentEnName: '',
    // country: '',
    countryZhName: '',
    countryEnName: '',
    addressZhName: '',
    addressEnName: '',
    phone: '',
    email: '',
})

const continentList = ref([
    {
        code: 'asia',
        zhName: '亚洲',
        enName: 'Asia'
    },
    {
        code: 'europe',
        zhName: '欧洲',
        enName: 'Europe'
    },
    {
        code: 'northAmerica',
        zhName: '北美洲',
        enName: 'NorthAmerica'
    },
    {
        code: 'southAmerica',
        zhName: '南美洲',
        enName: 'SouthAmerica'
    },
    {
        code: 'africa',
        zhName: '非洲',
        enName: 'Africa'
    },
    {
        code: 'oceania',
        zhName: '大洋洲',
        enName: 'Oceania'
    },
])

const formDrawerRef = ref(null)
const formRef = ref(null)
const drawerTitle = ref('')
const tableData = ref([])
const showSubBtn = ref(false)

//执行表单校验
const rules = {
    companyName: [
        { required: true, message: '公司名称不能为空', trigger: 'change' }
    ],
    companyEnName: [
        { required: true, message: '公司英文名称不能为空', trigger: 'change' }
    ],
    continent: [
        { required: true, message: '大洲不能为空', trigger: 'change' }
    ],

    countryZhName: [
        { required: true, message: '国家中文名称不能为空', trigger: 'change' }
    ],
    countryEnName: [
        { required: true, message: '国家英文名称不能为空', trigger: 'change' }
    ],
    addressZhName: [
        { required: true, message: '详细地址中文不能为空', trigger: 'change' }
    ],
    addressEnName: [
        { required: true, message: '详细地址英文不能为空', trigger: 'change' }
    ],
    phone: [
        { required: true, message: '联系方式不能为空', trigger: 'change' }
    ],
    email: [
        { required: true, message: 'email不能为空', trigger: 'change' }
    ],
}

// ------------------ function -------------------
//重置searchForm
function resetSearchForm() {
    for (let key in searchFormInitObject) {
        searchForm[key] = searchFormInitObject.key;
    }

}

const selectChange_continent = (e) => {
    console.log('select change: ', e)
    let index = continentList.value.findIndex(item => item.code == e)
    console.log('select index: ', index)
    if (index >= 0) {
        form.continentZhName = continentList.value[index].zhName
        form.continentEnName = continentList.value[index].enName
    }
}

const getData = (e) => {
    searchForm.pageNo = e
    partner_pageQuery_api(searchForm).then(res => {
        console.log('合作伙伴res:', res)
        tableData.value = res.records;
        searchForm.total = res.total;
    })
}

// 重置表单
function resetForm(row = false) {
    if (formRef.value) {
        formRef.value.resetFields()
    }
    if (row) {
        for (const key in form) {
            form[key] = row[key]
        }
    }
}

const handleEdit = (row) => {
    drawerTitle.value = '修改'
    resetForm(row)
    showSubBtn.value = true;
    // 文章图片
    formDrawerRef.value.open()
}

// 新增按钮点击事件
const handleCreate = () => {
    drawerTitle.value = '新增'
    resetForm({
        companyName: '',
        companyEnName: '',
        continent: '',
        continentZhName: '',
        continentEnName: '',
        country: '',
        countryZhName: '',
        countryEnName: '',
        addressZhName: '',
        addressEnName: '',
        phone: '',
        email: '',
    })
    //打开弹窗
    showSubBtn.value = true;
    formDrawerRef.value.open()
}

const handleSubmit = () => {
    formRef.value.validate((valid) => {
        console.log('校验结果：', valid)
        if (!valid) return

        //loading
        formDrawerRef.value.showLoading()
        //根据是否是修改标记，判断执行新增接口还是修改接口
        const fun = partner_addOrUpdate_api(form)

        fun.then(res => {
            toast(drawerTitle.value + "成功")
            // 修改刷新当前页，新增刷新第一页
            getData()
            formDrawerRef.value.close()
        }).finally(() => {
            //close loading
            formDrawerRef.value.hideLoading()
        })
    })
}

const handleDelete = (row) => {
    const fun = partner_delete_api({ id: row.id })
    //loading
    formDrawerRef.value.showLoading()
    fun.then(res => {
        toast("删除合作伙伴成功")
        // 修改刷新当前页，新增刷新第一页
        getData()
        formDrawerRef.value.close()
    }).finally(() => {
        //close loading
        formDrawerRef.value.hideLoading()
    })
}

// ------------------ 生命周期 --------------------
onMounted(() => {
    getData()
})
</script>

<style>
/* 关键样式：强制单元格文本溢出显示省略号 */
/* .el-table .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} */

.table-container {
    width: 100%;
    overflow-x: auto;
}

.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
</style>